<template>
	<view class="page w-full h-100vh overflow-hidden bg-fef9f5 relative">
		<fg-tree ref="fgTreeRef" :list="listData" :width="width" v-if="listData.length"></fg-tree>
		<view class="reset_view" @tap="resetView">点击复位</view>
	</view>
</template>

<script setup>
	const {
		api_get_familyWufu
	} = useRequest();

	const fgTreeRef = ref(null)

	const listData = ref([])
	const flatData = ref()
	const width = ref(2000)

	const getDetail = (id) => {
		api_get_familyWufu(id).then(res => {
			let length = countNodes(res)
			width.value = length * 70
			listData.value = res
		})
	}

	function countNodes(tree) {
		if (!tree || !tree.length) return 0;
		return tree.reduce((total, node) => {
			return total + 1 + (node.children ? countNodes(node.children) : 0);
		}, 0);
	}

	// 视角复位
	const resetView = () => {
		nextTick(() => {
			fgTreeRef.value.refreshView()
		})
	}

	onLoad((options) => {
		if (options.id) {
			getDetail(options.id)
		}
	})
</script>

<style scoped>
	.reset_view {
		position: absolute;
		/* #ifndef MP-WEIXIN */
		top: 40rpx;
		top: calc(constant(safe-area-inset-top) + 40rpx);
		top: calc(env(safe-area-inset-top) + 40rpx);
		/* #endif */
		/* #ifdef MP-WEIXIN */
		top: 180rpx;
		/* #endif */
		right: 40rpx;
		font-size: 30rpx;
		background-color: #f1f1f1;
		color: #333;
		padding: 10rpx 20rpx;
		border-radius: 100rpx;
	}
</style>